<template>
	<div class="login">
		<div class="logo">
			<img  src="../assets/logo.png" alt="">
		</div>
		<input-group type="number" v-model="phone" placeholder="手机号"
		:btnTitle="btnTitle" :disabled="disabled" :error="errors.phone" @btnClick="getVerifyCode"></input-group>
		<!-- 验证码 -->
		<input-group type="number" v-model="verifyCode" placeholder="验证码"
	  ></input-group>
		<!-- 协议 -->
		<div class="login_des">
			<p>
				新用户登录即自动登录,表示已同意<span>《用户服务协议》</span>
			</p>
		</div>
		<!-- 登录按钮 -->
		<div class="login_btn">
			<button :disabled="isClick" @click="login">登录</button>
		</div>
	</div>
</template>

<script>
	import InputGroup from '../components/inputGroup.vue'
	export default{
		components:{
			InputGroup
		},
		data(){
			return{
				phone:'',
				verifyCode:'',
				errors:{},
				btnTitle:"获取验证码",
				disabled:false
			}
			
		},
		computed:{
			isClick(){
				if(!this.phone||!this.verifyCode) return true;
				else return false
			}
		},
		methods:{
			login(){
				//取消错误提醒
				this.errors={};
				//发送请求
				this.$axios.post("/api/posts/sms_back",{
					phone:this.phone,
					code:this.verifyCode

				}).then(res=>{
					console.log(res.data)
					//检验成功 设置登陆状态且跳转到"/"
					localStorage.setItem("ele_Login",res.data.user._id);
					this.$router.push("/")
				}).catch(err=>{
					//返回错误信息
					this.errors={
						code:err.response.data.msg
					}
				})
			},
			
			getVerifyCode(){
				if(this.validatePhone()){
					//发送网络请求
					this.$axios.post('/api/posts/sms_send',{
						sid:"7494431dcba6002564c0893ce32b06d4",
						token:"b97fa2ffeb5a34aace852beb49f7d3c0",
						appid:"f321e74a496e4486a884554cf73862cc",
						templateid:"545096",
						phone:this.phone
					}).then(res=>{
						console.log(res);
						this.ValidateBtn();
					})
					
					
				}
			},
			ValidateBtn(){
				let time=60;
				let timer=setInterval(()=>{
					if(time==0){
						clearInterval(timer)
						this.btnTitle="获取验证码"
						this.disabled=false
					}else{
						time-=1;
						this.btnTitle=time+"秒后重试";
						this.disabled=true
					}
					
				},1000)
			},
			validatePhone(){
				//验证手机号码
				if(!this.phone){
					this.errors={
						phone:'手机号码不能为空'
					}
					return false;
					//1开头第二个数字是345678中的一个 后面9个数字随机
				}else if(!/^1[345678]\d{9}$/.test(this.phone)){
					this.errors={
						phone:'手机号码格式不对'
					};
					return false;
				}else{
					this.errors={};
					return true
				}
				
			}
		}
	}
</script>

<style scoped="scoped">
	.login {
	  width: 100%;
	  height: 100%;
	  padding: 30px;
	  box-sizing: border-box;
	  background: #fff;
	}
	
	.logo {
	  text-align: center;
	}
	.logo img {
	  width: 150px;
	}
	.text_group,
	.login_des,
	.login_btn {
	  margin-top: 20px;
	}
	.login_des {
	  color: #aaa;
	  line-height: 22px;
	}
	.login_des span {
	  color: #4d90fe;
	}
	.login_btn button {
	  width: 100%;
	  height: 40px;
	  background-color: #48ca38;
	  border-radius: 4px;
	  color: white;
	  font-size: 14px;
	  border: none;
	  outline: none;
	}
	.login_btn button[disabled] {
	  background-color: #AAAAAA;
	}
	
</style>
